<template>
  <div id="scatter">
  </div>
</template>

<script setup lang="ts" name="kmeansEcharts">
  import * as echarts from 'echarts';
  import { ref, onMounted, reactive } from 'vue';
  import ecStat from 'echarts-stat';
  import axios from 'axios';

  const chart = ref < HTMLElement | null > (null);
  const dataList = reactive({ data: [] })

  onMounted(async () => {
    axios.get('http://127.0.0.1:5000/kmeans').then((res) => {
      Object.assign(dataList, res.data)
      console.log(dataList.data[0].x)

      var chartDom = document.getElementById('scatter');
      // var chartDom = document.getElementById('main');
      var myChart = echarts.init(chartDom);
      var option;

      echarts.registerTransform(ecStat.transform.clustering);

      var CLUSTER_COUNT = 6;
      var DIENSIION_CLUSTER_INDEX = 2;
      var COLOR_ALL = [
        '#37A2DA',
        '#e06343',
        '#37a354',
        '#b55dba',
        '#b5bd48',
        '#8378EA',
        '#96BFFF'
      ];
      var pieces = [];
      for (var i = 0; i < CLUSTER_COUNT; i++) {
        pieces.push({
          value: i,
          label: 'cluster ' + i,
          color: COLOR_ALL[i]
        });
      }
      option = {
        grid: {
          left: '10%',
          right: '10%',
          top:'15%',
          bottom: '3%',
          containLabel: true
        },
        title:{
          text:'二手房销售预测折线图',
          left: '10%',
          top:'5%',
        },
        xAxis: {
          type: 'category',
          data: dataList.data[0].x,
          boundaryGap: false
        },
        yAxis: {
          type: 'value',
          axisLine: {
            show: true
          },
          splitLine: {
            show: true
          }
        },
        series: [
          {
            data: dataList.data[0].y,
            type: 'line'
          }
        ]
      };

      // option = {
        // dataset: [
          // {
            // source: dataList.data
          // },
          // {
            // transform: {
              // type: 'ecStat:clustering',
              // print: true,
              // config: {
                // clusterCount: CLUSTER_COUNT,
                // outputType: 'single',
                // outputClusterIndexDimension: DIENSIION_CLUSTER_INDEX
              // }
            // }
          // }
        // ],
        // tooltip: {
          // position: 'top'
        // },
        // visualMap: {
          // type: 'piecewise',
          // top: 'middle',
          // min: 0,
          // max: CLUSTER_COUNT,
          // left: 10,
          // splitNumber: CLUSTER_COUNT,
          // dimension: DIENSIION_CLUSTER_INDEX,
          // pieces: pieces
        // },
        // grid: {
          // left: 120
        // },
        // xAxis: {},
        // yAxis: {},
        // series: {
          // type: 'scatter',
          // encode: { tooltip: [0, 1] },
          // symbolSize: 15,
          // itemStyle: {
            // borderColor: '#555'
          // },
          // datasetIndex: 1
        // }
      // };

      option && myChart.setOption(option);
    })
  })


</script>

<style scoped>
  #scatter {
    width: 100%;
    height: 80vh;
    display: flex;
    justify-content: space-around;
    /* margin: 20px; */
  }
</style>